<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!-- 引入统一样式文件 -->
<link rel="stylesheet" href="../static/css/library-common.css">

<div class="card">
    <!-- 搜索表单：扩展搜索条件 -->
    <div class="search-bar">
        <form action="back_book" method="get">
            <input type="hidden" name="action" value="list">
            <input type="text" name="username" placeholder="输入借阅人名" value="${param.username}"/>
            <input type="text" name="bookTitle" placeholder="输入书籍名" value="${param.bookTitle}"/>
            <select name="hasFine">
                <option value="">是否有罚款</option>
                <option value="YES" ${param.hasFine == 'YES' ? 'selected' : ''}>是</option>
                <option value="NO" ${param.hasFine == 'NO' ? 'selected' : ''}>否</option>
            </select>
            <button type="submit" class="btn btn-primary">搜索</button>
        </form>
    </div>

    <!-- 归还表格：使用JSTL遍历，区分逾期状态 -->
    <table>
        <thead>
        <tr>
            <th>序号</th>
            <th>借阅人</th>
            <th>借阅人手机号</th>
            <th>借阅书本</th>
            <th>借阅时间</th>
            <th>预计归还时间</th>
            <th>归还日期</th>
            <th>逾期天数</th>
            <th>罚款金额</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${returnRecords}" var="returnRecord" varStatus="status">
            <tr align="center">
                <td>${status.count}</td>
                <td>${returnRecord.username}</td>
                <td>${returnRecord.phone}</td> <!-- 修复：原代码误写为bookTitle -->
                <td>${returnRecord.bookTitle}</td>
                <td><fmt:formatDate value="${returnRecord.borrowDate}" pattern="yyyy/MM/dd"/></td>
                <td><fmt:formatDate value="${returnRecord.expectReturnDate}" pattern="yyyy/MM/dd"/></td>
                <td><fmt:formatDate value="${returnRecord.returnDate}" pattern="yyyy/MM/dd"/></td>
                <td>
                    <c:choose>
                        <c:when test="${returnRecord.overdueDays > 0}">
                            <span class="status-danger">${returnRecord.overdueDays}</span>
                        </c:when>
                        <c:otherwise>
                            <span class="status-success">${returnRecord.overdueDays}</span>
                        </c:otherwise>
                    </c:choose>
                </td>
                <td><fmt:formatNumber value="${returnRecord.fineAmount}" pattern="0.00"/> 元</td>
                <td>
                    <a href="javascript:void(0)"
                       onclick="showDeleteConfirm(${returnRecord.id})"
                       style="color: #ff4d4f;">删除</a>
                </td>
            </tr>
        </c:forEach>
        <c:if test="${empty returnRecords}">
            <tr>
                <td colspan="10" align="center">暂无归还记录</td>
            </tr>
        </c:if>
        </tbody>
    </table>
</div>

<!-- 删除确认框 -->
<div class="modal-overlay" id="deleteOverlay"></div>
<div class="confirm-dialog" id="deleteConfirm">
    <p>确定要删除该归还记录吗？此操作不可撤销。</p>
    <input type="hidden" id="deleteId">
    <button class="btn btn-danger" onclick="confirmDelete()">确认删除</button>
    <button class="btn btn-secondary" onclick="cancelDelete()">取消</button>
</div>

<script>
    // 删除确认控制
    function showDeleteConfirm(id) {
        document.getElementById("deleteId").value = id;
        document.getElementById("deleteOverlay").style.display = "block";
        document.getElementById("deleteConfirm").style.display = "block";
    }

    function confirmDelete() {
        const id = document.getElementById("deleteId").value;
        window.location.href = "return?action=delete&id=" + id;
    }

    function cancelDelete() {
        document.getElementById("deleteOverlay").style.display = "none";
        document.getElementById("deleteConfirm").style.display = "none";
    }

    // 通用关闭逻辑
    document.getElementById("deleteOverlay").addEventListener("click", cancelDelete);

    document.addEventListener("keydown", function (e) {
        if (e.key === "Escape") {
            cancelDelete();
        }
    });
</script>
